<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定时器</title>
</head>
<body>
  <script>

  // 因为JS引擎只有一个线程，所以它将会强制异步事件排队执行

    // 这个问题涉及到this的指向问题，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上.
    // 这会导致这些代码中包含的this关键字会指向window(或全局)对象。
 
    // 定时器2: 延时执行

    // 5秒后执行方法, 函数调用一次
    setTimeout(()=>{
      console.log("5秒已经过去了");
    }, 5000);

    // 如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行
    // 定时器1: 重复执行回调方法
    // 每隔一秒执行一次打印
    let num = 1;
    window.setInterval(()=> {
      num ++;
      console.log("当前时间过了 " + num + "s");
    }, 1000)

    // this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决
    var obj = {
        msg: 'obj',
        
        shout: function () {
          console.log(this.msg);
        },

        // 变量解决this问题
        waitAndShout: function () {
          let _this = this; // 这里将this赋给一个变量
          setTimeout(function () {
            _this.shout();
          }, 0);
        },

        // 箭头函数解决this问题
        waitLittleTime() {
          setTimeout(()=> this.shout(), 2000);
        },
      
        // bind 解决this问题: 在方法调用后面，添加bind函数，将函数函数与对象绑定
        waitShort: function () {
          setTimeout(function () {
            this.shout();
          }.bind(this), 4000);
        },

      };
          
      obj.waitAndShout();
      obj.waitLittleTime();
      obj.waitShort();

  </script>
</body>
</html>